<template>
	<!-- 预存款主页 -->
	<div class="w750">
		<header>
			<div class="header-box">
				<div class="header-back" @click="goback">
					<span class="back-img"><img src="../../assets/images/back.png" alt=""/></span>
				</div>
				<div class="header-search"><p class="ser-txt">预存款主页</p></div>
				<div class="header-mes"><HeadSelect></HeadSelect></div>
			</div>
		</header>
		<!-- 预存款 -->
		<div class="pre-deposit">
			<div class="balance">
				<span class="pre-bg"><img src="../../assets/images/pre-bg.jpg" alt=""/></span>
				<span class="txt">可用预存款(元)</span>
				<p class="num">
					<span class="price">{{ Money(predepositData.availablePredeposit)[0] }}</span>
					.{{ Money(predepositData.availablePredeposit)[1] }}
				</p>
			</div>
			<div class="state">
				<div class="item">
					<span class="num">
						<span class="price">{{ Money(predepositData.totalPredeposit)[0] }}</span>
						.{{ Money(predepositData.totalPredeposit)[1] }}
					</span>
					<span class="txt">预存款总额(元)</span>
				</div>
				<div class="item">
					<span class="num">
						<span class="price">{{ Money(predepositData.freezePredeposit)[0] }}</span>
						.{{ Money(predepositData.freezePredeposit)[1] }}
					</span>
					<span class="txt">冻结预存款(元)</span>
				</div>
			</div>

			<div class="entry-con mt10">
				<router-link :to="{ path: '/preDeposit/recharge', query: {} }">
					<div class="con-box clearfix">
						<div class="fl">
							<span class="entry-icon"><img src="../../assets/images/pre-icon01.png" alt=""/></span>
							<span class="entry-name">充值</span>
						</div>
						<div class="fr">
							<em class="arr"><img src="../../assets/images/arrow.png" alt=""/></em>
						</div>
					</div>
				</router-link>
			</div>
			<div class="entry-con">
				<router-link :to="{ path: '/preDeposit/withdrawWay', query: {} }">
					<div class="con-box clearfix">
						<div class="fl">
							<span class="entry-icon"><img src="../../assets/images/pre-icon02.png" alt=""/></span>
							<span class="entry-name">提现</span>
						</div>
						<div class="fr">
							<em class="arr"><img src="../../assets/images/arrow.png" alt=""/></em>
						</div>
					</div>
				</router-link>
			</div>
			<div class="entry-con">
				<router-link :to="{ path: '/preDeposit/accountDet', query: {} }">
					<div class="con-box clearfix">
						<div class="fl">
							<span class="entry-icon"><img src="../../assets/images/pre-icon03.png" alt=""/></span>
							<span class="entry-name">账户明细</span>
						</div>
						<div class="fr">
							<em class="arr"><img src="../../assets/images/arrow.png" alt=""/></em>
						</div>
					</div>
				</router-link>
			</div>
			<div class="entry-con">
				<router-link :to="{ path: '/preDeposit/withdrawRecord', query: {} }">
					<div class="con-box clearfix">
						<div class="fl">
							<span class="entry-icon"><img src="../../assets/images/pre-icon04.png" alt=""/></span>
							<span class="entry-name">提现记录</span>
						</div>
						<div class="fr">
							<em class="arr"><img src="../../assets/images/arrow.png" alt=""/></em>
						</div>
					</div>
				</router-link>
			</div>
		</div>
		<!-- /预存款 -->
	</div>
</template>

<script>
import cash from 'utils/tool';
import HeadSelect from 'components/headBox/headSelect';
import { preDeposit } from 'api/preDeposit';
export default {
	components: { HeadSelect },

	data() {
		return {
			Money: cash,
			predepositData: '',
			on: false
		};
	},

	mounted() {
		let that = this;
		preDeposit().then(res => {
			//在预存款首页时，加预存款首页数据
			if (res.status == 1) {
				this.predepositData = res.result;
			} else {
				this.$toast({ duration: 1000, message: res.msg });
			}
		});
	},

	methods: {
		goback() {
			//此处不能引入头部组件，因为返回会有bug
			this.$router.push('/my');
			this.$router.isBack = true;
		},
	}
};
</script>

<style src="../../assets/css/pre-deposit.css" scoped></style>
<style src="../../assets/css/common.css" scoped></style>